<template>
	<view class="coupon">
		<view class="coupon-bon">
			<view class="coupon-list"  v-for="index in 5" :key="index">
				<view class="couponl-t">
					<view class="couponl-t-r">
						<view class="couponl-t-r-t">
							￥20
						</view>
						<view class="couponl-t-r-b">
							满200元可用
						</view>
					</view>
					<!-- l左边 r右边 t上边  b下边-->
				</view>
				<view class="couponl-r">
					<view class="couponl-t-l">
						<text>仅限用于XX加油站</text>
					</view>
					<view class="couponl-b">
						<text class="couponl-b-l">2020.04.11至2023.05.11</text>
						<view class="couponl-b-r">立即使用</view>
					</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {}
	}
</script>

<style>
	.coupon {
		
			position: relative;
			height: 100%;
			background-color: #fff;
			padding: 20rpx;
		}
		.coupon-bon {
			background-color: #fff;
		}
		.coupon-list {
			height: 200rpx;
			width: 100%;
			border-radius: 10rpx;
			background-color: #F8F8F8;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
		.couponl-t-r {
			width: 200rpx;
			height: 160rpx;
			background-color: #4a8cff;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 30rpx;
			margin-right: 20rpx;
		}
		.couponl-t-r-t {
			font-size: 40rpx;
			font-weight: bold;
		}
		.couponl-t-r-b {
			font-size: 22rpx;
		}
		.couponl-r {
			flex: 1;
			padding-left: 20rpx;
			border-left: 1px dashed #d9d9d9;
		}
		.couponl-t-l {
			font-size: 26rpx;
			color: #666666;
			margin-bottom: 10rpx;
		}
		.couponl-b {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.couponl-b-l {
			font-size: 22rpx;
			color: #ff4d4f;
		}
		.couponl-b-r {
			width: 120rpx;
			height: 55rpx;
			background-color: #4a8cff;
			border-radius: 15rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
		}
	
</style>